import { KeyboardEvent, ReactElement } from 'react'
import style from '../index.module.less'
import ClearBtn from './clearBtn'
import Notice from './notice'

// 回车触发提交
function enterHandle (e: KeyboardEvent, login: () => void) {
  const key = e.keyCode || e.which || e.charCode
  if (key === 13) {
    login()
  }
}

interface Props {
  username: string
  setUsername: (v: string) => void
  password: string
  setPassword: (v: string) => void
  noticeUsername: string
  noticePassword: string
  login: () => void
}

function Main ({ username, setUsername, password, setPassword, noticeUsername, noticePassword, login }: Props): ReactElement {
  return (
    <div>
      <div>
        <div className={style['password-block']}>
          <input placeholder='请输入账号' value={username} onChange={v => setUsername(v.target.value)} autoComplete='off' onKeyPress={e => enterHandle(e, login)} />
          <ClearBtn value={username} onChange={setUsername} />
        </div>

        <div className={style['white-space']}>
          <Notice value={noticeUsername} />
        </div>

        <div className={style['password-block']}>
          <input type='password' placeholder='请输入密码' value={password} autoComplete='off' onChange={v => setPassword(v.target.value )} onKeyPress={e => enterHandle(e, login)} />
          <ClearBtn value={password} onChange={setPassword} />
        </div>

        <div className={style['white-space']}>
          <Notice value={noticePassword} />
        </div>
      </div>
    </div>
  )
}

export default Main
